<script>
export default {
  name: "RegisterPage",
  data() {
    return {
      tableData: [],
      loading:false,
      // 表单数据
      form: {
        no: "",
        name:"",
        password: "",
        confirmPassword: "",
        phoneNum:"",
      },
      rules: {
        no: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "用户名长度在 3 到 10 个字符", trigger: "blur" },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度为2-10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "密码长度在 6 到 16 个字符", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码", trigger: ['blur', 'change'] },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入的密码不一致！"));
              } else {
                callback();
              }
            },
            trigger: ['blur', 'change']
          },
        ],
        phoneNum: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern:/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    doSave(){//新增
      this.loading = true
      const postData = {
        no:this.form.no,
        name:this.form.name,
        password:this.form.password,
        phoneNum:this.form.phoneNum,
      }
      this.$axios.post(this.$httpUrl+'/user/register', postData)
          .then(res=>res.data)
          .then(res=>{
            console.log(res)
            if (res.code === 200){
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.$router.push("/LoginPage"); // 注册成功后跳转到登录页面
              this.resetForm()
            }else{
              this.$message({
                message: '操作失败！',
                type: 'error'
              });
            }
      }).catch((error) => {
        console.error('完整错误信息:', error.response)
        const errorMsg = error.response?.data?.message || '请求失败'
        this.$message.error(`注册失败: ${errorMsg}`)
          })
          .finally(() => {
            this.loading=false
          });
    },


    save(){//保存提交数据至后端
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.doSave();
        } else {
          this.$message.warning('请完善信息')
          const firstError = this.$refs.form.fields.find(field => field.validateState === 'error')
          firstError?.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
          // console.log('error submit!')
          // return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
}
</script>

<template>
  <div>
    <div class="bg_box">
      <div class="register_position">
        <div style="width: 350px; height: 545px" class="form-PanelC" v-loading="loading">
          <div class="register">
            <div class="register-title">
              <span>账号注册</span>
            </div>

            <el-form :model="form" :rules="rules" ref="form">
              <!-- 账号 -->
              <el-form-item label="账号" prop="no">
                <el-input v-model="form.no" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
              </el-form-item>

              <el-form-item label="姓名" prop="name">
                <el-input
                    v-model="form.name"
                    prefix-icon="el-icon-user"
                    placeholder="请输入姓名"
                ></el-input>
              </el-form-item>

              <!-- 密码 -->
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
              </el-form-item>

              <!-- 确认密码 -->
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                    type="password"
                    v-model="form.confirmPassword"
                    prefix-icon="el-icon-lock"
                    placeholder="请再次输入密码"
                    @keyup.enter="save"
                >
                  <template #suffix>
                    <i
                        v-if="form.confirmPassword && form.password === form.confirmPassword"
                        class="el-icon-success"
                        style="color: #67C23A; margin-right: 10px;"
                    ></i>
                    <i
                        v-else-if="form.confirmPassword"
                        class="el-icon-error"
                        style="color: #F56C6C; margin-right: 10px;"
                    ></i>
                  </template>
                </el-input>
              </el-form-item>

              <!--电话-->
              <el-form-item label="电话" prop="phoneNum">
                <el-input type="phoneNum" v-model="form.phoneNum" prefix-icon="el-icon-phone" placeholder="请输入电话"></el-input>
              </el-form-item>

              <!-- 注册按钮 -->
              <el-form-item>
                <el-button type="primary" @click="save('form')">注册</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <img class="bg_img"
           src="@/assets/register.jpg" alt="加载失败"
           referrer="no-referrer|origin|unsafe-url" width="100%" height="100%" />
    </div>
  </div>
</template>

<style scoped>
.register-container {
  max-width: 500px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
.register_position {
  border-radius: 6px;
  position: absolute;
  top: 160px;
  right: 100px;
  background-color: #fff;
}
.bg_img {
  object-fit: fill;
}
.register {
  padding: 20px;

  .register-title {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 20px;
    line-height: 1.5;

    a {
      outline: none;
    }
  }
  .el-form-item.is-success .el-input__inner {
    border-color: #67C23A !important;
  }
  .el-form-item.is-error .el-input__inner {
    border-color: #F56C6C !important;
  }
}
</style>